<template>
  <div>
    <div p-5>
      <TaskInfo :id="route.query.id"></TaskInfo>
      <div class="taskInfo-body-box">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">文书制作</div>
        </div>
        <div class="taskInfo-body-box-info">
          <a-row :gutter="24">
            <a-col class="gutter-row" :span="8">
              <BookCreate
                :type="4"
                :id="id"
                :disabled="taskData?.orderCorrectFileUrl != ''"
                :url="taskData?.nowCorrectFileUrl"
                @getBookUrl="getBookUrl"
              />
            </a-col>
            <a-col class="gutter-row" :span="8">
              <BookCreate
                :type="5"
                :id="id"
                :disabled="taskData?.nowCorrectFileUrl != ''"
                :url="taskData?.orderCorrectFileUrl"
                @getBookUrl="getBookUrl"
              />
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col class="gutter-row" :span="8">
              <BookCreate
                :type="2"
                :id="id"
                :disabled="taskData?.orderCorrectFileUrl != ''"
                :url="taskData?.punishFileUrl"
                @getBookUrl="getBookUrl"
              />
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="taskInfo-body-box">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">处置方式</div>
        </div>
        <div class="taskInfo-body-box-infos">
          <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-row :gutter="24">
              <a-col class="gutter-row" :span="8">
                <a-form-item label="处理方式" name="punishType">
                  <a-select v-model:value="formState.punishType" placeholder="请选择处理方式">
                    <a-select-option :value="0">简易处罚</a-select-option>
                    <a-select-option :value="1">一般处理</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </div>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button size="large" @click="cacel">取消</a-button>
        <a-button size="large" type="primary" @click="onSubmit(1)">暂存</a-button>
        <a-button size="large" type="primary" @click="onSubmit(0)">提交</a-button>
      </a-space>
    </div>
    <a-modal title="记录表编号设置" v-model:open="open" :width="400" @ok="handleOk">
      <BeCurrent ref="administrativePenalty" @getDataUrl="getDataUrl" />
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import TaskInfo from './components/taskInfo.vue';
  import BookCreate from '@/components/basic/book-create/index.vue';
  import router from '@/router';
  import { onMounted, reactive, ref } from 'vue';
  import { processTasks } from '@/api/supervision/handleTask';
  import { taskxfInfo } from '@/api/supervision/create-task';
  import { message } from 'ant-design-vue';
  import BeCurrent from '@/components/basic/book-create/components/beCurrent/index.vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  const tabsViewStore = useTabsViewStore();
  const route = useRoute();
  const cacel = () => {
    router.back();
  };
  const open = ref(false);

  const id = route.query.id as any;

  const getBookUrl = (data) => {
    console.log(data);
    if (data.code == 0) {
      taskxfInfoApi();
    }
  };

  const onSubmit = async (val) => {
    if (val == 1) {
      let data = {
        id: id,
        punishType: formState.punishType as any,
      };
      const res = await processTasks(val, data);

      if (res.code == 0) {
        message.success('已暂存');
        tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
      }
    } else {
      formRef.value
        .validate()
        .then(async () => {
          if (val == 0) {
            taskxfInfoApi();
            if (
              (taskData.value?.nowCorrectFileUrl != '' && taskData.value?.punishFileUrl != '') ||
              taskData.value?.orderCorrectFileUrl != ''
            ) {
              open.value = true;
            } else {
              message.error('文书未制作！');
            }
          }
        })
        .catch((error) => {
          console.log('error', error);
        });
    }
  };

  const formRef = ref();
  const labelCol = {
    span: 4,
  };
  const wrapperCol = {
    span: 20,
  };
  const formState = reactive({
    punishType: undefined, //处理方式 0 简易处罚  1 一般处理
  });

  const rules = {
    punishType: [
      {
        required: true,
        message: '请选择处理方式',
        trigger: 'change',
      },
    ],
  } as any;

  const taskData = ref();

  const taskxfInfoApi = async () => {
    const data = await taskxfInfo(route.query.id);
    taskData.value = data;
  };
  const administrativePenalty = ref();
  const handleOk = () => {
    administrativePenalty.value.confirm();
  };
  const getDataUrl = async (data) => {
    console.log(data);
    let params = {
      id: id,
      punishType: formState.punishType as any,
      ...data,
    };
    const res = await processTasks(0, params);
    if (res.code == 0) {
      message.success('提交成功！');
      tabsViewStore.closeCurrentTabToUrl(route, '/supervision/supervision/task-management');
      open.value = false;
    }
  };

  onMounted(async () => {
    if (route.query.id) {
      const data = await taskxfInfo(route.query.id);
      taskData.value = data;

      formState.punishType = taskData.value.punishType;
    }
  });
</script>
<style lang="less" scoped>
  .taskInfo {
    &-body {
      &-box {
        margin-bottom: 16px;

        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0;

          &-left {
            height: 14px;
            margin-right: 7px;
            border: 1px solid #0f53ac;
            border-radius: 4px;
          }

          &-right {
            color: rgb(68 68 68 / 100%);
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
          }
        }
      }
    }
  }
</style>
